<div id="root_inner_wrapper">
    <section class="content-header">
        <h1>
            Data Tables
            <small>advanced tables</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Tables</a></li>
            <li class="active">Data tables</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-xs-12">


                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">Data Table With Full Features</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="dataTables_length" id="example1_length"><label>Show <select
                                            name="example1_length" aria-controls="example1"
                                            class="form-control input-sm">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select> entries</label></div>
                                </div>
                                <div class="col-sm-6">
                                    <div id="example1_filter" class="dataTables_filter"><label>Search:<input
                                            type="search"
                                            class="form-control input-sm"
                                            placeholder=""
                                            aria-controls="example1"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="example1" class="table table-bordered table-striped dataTable"
                                           role="grid"
                                           aria-describedby="example1_info">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_desc" tabindex="0" aria-controls="example1" rowspan="1"
                                                colspan="1"
                                                aria-label="Rendering engine: activate to sort column ascending"
                                                style="width: 289px;" aria-sort="descending">Rendering engine
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1"
                                                colspan="1" aria-label="Browser: activate to sort column ascending"
                                                style="width: 362px;">Browser
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1"
                                                colspan="1" aria-label="Platform(s): activate to sort column ascending"
                                                style="width: 334px;">Platform(s)
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1"
                                                colspan="1"
                                                aria-label="Engine version: activate to sort column ascending"
                                                style="width: 252px;">Engine version
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1"
                                                colspan="1" aria-label="CSS grade: activate to sort column ascending"
                                                style="width: 190px;">CSS grade
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1"
                                                colspan="1" aria-label="CSS grade: activate to sort column ascending"
                                                style="width: 190px;">Operation
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="user,index in users" role="row" :class="assignClass(user, index)">
                                            <td>{{ index }}</td>
                                            <td>{{ user.id }}</td>
                                            <td>{{ user.username }}</td>
                                            <td>{{ user.createTime | timeFmt('yyyy-MM-dd HH:mm:ss') }}</td>
                                            <td>{{ user.age }}</td>
                                            <td>
                                                <button class="btn btn-primary" @click="showUser(user)">查看</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                        <tfoot>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5">
                                    <div class="dataTables_info" id="example1_info" role="status" aria-live="polite">
                                        Showing
                                        1 to 10 of 57 entries
                                    </div>
                                </div>
                                <div class="col-sm-7">

                                    <pagination-component :model.sync="page" @on-change="changePage"></pagination-component>

                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>

                </div>
                <!-- /.box -->
            </div>
            <!-- /.box -->
    </section>
</div>

<script type="text/javascript" src="js/components/pagination-component.js"></script>

<script>
    var vm = new Vue({
        el: '#root_inner_wrapper',
        data: {
            users: [],
            page: {
                current: 2,
                pageSize: 10,
                count: 1000
            }
        },
        watch: {
            'page.current': function(newCurrent, oldCurrent) {
                console.log("父级页面， 当前页发生变更： " + oldCurrent + " --> " + newCurrent);
            }
        },
        mounted: function () {
            var vm = this;
            // 异步加载数据
            $.getJSON('data/users.json', {}, function (users) {
                vm.users = users;
            });
        },
        methods: {
            assignClass: function (user, index) {
                var isOdd = index % 2 == 0;
                return {
                    odd: isOdd
                }
            },
            showUser: function (user) {
                console.log("ShowUser: ");
                console.dir(user);
            },
            changePage: function(newPageNo) {
                var vm = this;
                console.log('父级页码发生变化 on-change 事件： ' + newPageNo + ", 父级的page.current=" + vm.page.current);

            }
        }
    });
</script>